<template>
    <div class="home-topbar-wrapper border-half-bottom">
        <div class="top-menu-bar">
            <swiper :options="swiperOption" ref="swiper-box">
                <swiper-slide v-for="(news, index) in newsList" :class="{'active': homeNewsIndex === index}" @click.native="active(index)" :key="index">{{news.title}}</swiper-slide>
            </swiper>
        </div>
        <a class="top-menu-more-btn df-c" href="javascript:void(0)" @click="isTopBarBox=true"><i class="list-shadow"></i><span class="cross"></span></a>

        <TopBarBox :class="{'top-bar-active-active': isTopBarBox}" @close="isTopBarBox=false"></TopBarBox>

    </div>
</template>
<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import { mapGetters } from 'vuex'
    import TopBarBox from 'components/TopBarBox'
    export default {
        components: {
            swiper,
            swiperSlide,
            TopBarBox,
        },
        data () {
            return{
                swiperOption: {
                    slidesPerView: 6
                },
                isTopBarBox: false
            }
        },
        methods: {
            async active (index) {
                this.$store.state.home.newsIndex = index
                if (this.homeNewsIndex ==1) {
                    await this.$router.push("/video")
                }
                if (this.homeNewsIndex ==0) {
                    await this.$router.push("/home")
                }
                if (this.homeNewsIndex ==3) {
                    await this.$router.push("/headline")
                }
                if (this.homeNewsIndex ==2) {
                    await  this.$router.push("/hotList")
                }
                if (this.homeNewsIndex ==4) {
                    await  this.$router.push("/weather")
                }


            }
        },
        computed: {
            swiper () {
                return this.$refs['swiper-box'].swiper
            },
            ...mapGetters([
                'newsList',
                'homeNewsIndex'
            ])
        }
    }
</script>
<style lang="less" scoped>
    @bar-color: #f4f5f6;
    .home-topbar-wrapper {
        height: 0.4rem;
        line-height: 0.4rem;
        color: gray;
        font-size: 0.16rem;
        text-align: center;
        position: relative;
        background: #ffffff;
        .active {
            color: @theme-red;
        }
        .top-menu-bar {
            width: e("calc(100% - 0.4rem)");
            position: absolute;

        }
        .top-bar-active-active {
            top: 0.1rem;
        }
        .top-menu-more-btn {
            position: absolute;
            right: 0;top: 0;
            width: 0.4rem;
            height: 0.4rem;
            background: @bar-color;
            z-index: 9;
            .list-shadow {
                position: absolute;
                right: 100%;top: 0;
                width: 0.1rem;
                height: 100%;
                background: url() no-repeat center right;
                background-size: contain;
            }
            .cross {
                width: 0.17rem;
                height: 0.17rem;
                &:before, &:after {
                    position: absolute;
                    content: ' ';
                    height: 0.17rem;
                    width: 0.04rem;
                    background-color: @theme-red;
                }
                &:before {
                    transform: rotate(90deg);
                }
            }
        }
    }
</style>
